<!doctype html>
<html>
<head>
<meta charset="utf-8">
    <title>资金统计报告</title>
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">     
    <meta content="yes" name="apple-mobile-web-app-capable">     
    <meta content="black" name="apple-mobile-web-app-status-bar-style">     
    <meta content="telephone=no" name="format-detection">
    <link rel="shortcut icon" href="/favicon.ico">
    <link rel="stylesheet" type="text/css" href="/H5/css/sm.min.css" />
    <link rel="stylesheet" type="text/css" href="/H5/css/reset.css" />
    <link rel="stylesheet" type="text/css" href="/H5/css/balance.css?v=1" />
</head>            
<body>
	<div class="page-group ms-controller" :controller="balance">
        <div class="page page-current">
            <header class="bar bar-nav">
              	<a class="icon icon-left pull-left" href="javascript:window.history.go(-1);"></a>
              	<a class="icon icon-home pull-right" href="/H5"></a>
              	<h1 class="title">资金统计报告</h1>
            </header>
            <div style="margin-bottom: 0;top: 2.5rem; position: absolute; width: 100%; z-index: 999999">
                <div class="buttons-tab">
                    <a :on-click="@typeChoose(1)" :class="@type==1?'tab-link active button':'tab-link button'">资金统计</a>
                    <a :on-click="@typeChoose(2)" :class="@type==2?'tab-link active button':'tab-link button'">资金明细</a>
                </div>
            </div> 
            <div class="content visibility infinite-scroll infinite-scroll-bottom" style="top: 5rem;" data-distance="100">
                <div :visible="@type==1" class="content-block-title title_line">账户余额<span>￥{{@data.total.balance||0}}</span>
                </div>
                <div :visible="@type==1" style="padding: 0 3%; color: black; font-size: 1rem; height: 40px;line-height: 40px;">冻结资金<span style="float: right;color: #F60;font-size: 24px;">￥{{@data.total.frozen_money||0}}</span>
                </div>
    			<div :visible="@type==1" class="list-block" style="margin:0; padding:0;">
    				<ul class="balance">
                      	<li class="item-content content_list" style="background-color:#f3f3f3">
                        	<div class="item-inner">
                            	<div class="item-title">收入统计</div>
                            	<div class="item-after" style="color: #0c0">￥+{{@data.income.total||0}}</div>
    						</div>
    					</li>
                      	<li class="item-content">
                        	<div class="item-inner">
                            	<div class="item-title">汇款充值</div>
                            	<div class="item-after" style="color: #0c0">￥{{@data.income.remit||0}}</div>
    						</div>
    					</li>
                      	<li class="item-content">
                        	<div class="item-inner">
                            	<div class="item-title">会员转入</div>
                            	<div class="item-after" style="color: #0c0">￥+{{@data.income.transfer_in||0}}</div>
    						</div>
    					</li>
                      	<li class="item-content">
                        	<div class="item-inner">
                            	<div class="item-title">佣金分红</div>
                            	<div class="item-after" style="color: #0c0">￥+{{@data.income.commission||0}}</div>
    						</div>
    					</li>
                      	<li class="item-content">
                        	<div class="item-inner">
                            	<div class="item-title">邀请代付</div>
                            	<div class="item-after" style="color: #0c0">￥+{{@data.income.invite_pay||0}}</div>
    						</div>
    					</li>
    				</ul>
                    <ul class="balance">
                      	<li class="item-content content_list01" style="background-color:#f3f3f3">
                        	<div class="item-inner">
                            	<div class="item-title">支出统计</div>
                            	<div class="item-after" style="color: #f00">￥-{{@data.expense.total||0}}</div>
    						</div>
    					</li>
                      	<li class="item-content">
                        	<div class="item-inner">
                            	<div class="item-title">余额转出</div>
                            	<div class="item-after" style="color: #f00">￥-{{@data.expense.transfer_out||0}}</div>
    						</div>
    					</li>
                      	<li class="item-content">
                        	<div class="item-inner">
                            	<div class="item-title">余额提现</div>
                            	<div class="item-after" style="color: #f00">￥-{{@data.expense.draw_cash||0}}</div>
    						</div>
    					</li>
                      	<li class="item-content">
                        	<div class="item-inner">
                            	<div class="item-title">消费购物</div>
                            	<div class="item-after" style="color: #f00">￥-{{@data.expense.order||0}}</div>
    						</div>
    					</li>
                      	<li class="item-content">
                        	<div class="item-inner">
                            	<div class="item-title">订单代付</div>
                            	<div class="item-after" style="color: #f00">￥-{{@data.expense.pay_invite||0}}</div>
    						</div>
    					</li>
    				</ul>
                </div>          
                <div :visible="@type==2" class="integral_balance_first" :for="el in @list">
                    <div>
                        <span><b style="font-size: .8rem">{{el.type_label}}</b></span>
                        <span style="float: right" :css="{'color': (el.change_money-0)>0?'#0c0':'red'}" >{{(el.change_money-0)>0?'+'+el.change_money:el.change_money}}</span>
                    </div>
                    <div>
                        <div style="overflow: hidden">
                            <span style="float: left; font-size: .7rem">变更前金额：{{el.old_balance}}</span>
                            <span style="float: right; font-size: .7rem">变更后金额：{{el.new_balance}}</span>
                        </div>
                        <span style="color: #999">{{el.create_time}}</span>
                    </div>
                </div>
                <div :visible="@more" class="infinite-scroll-preloader">
                    <div class="preloader"></div>
                </div>
            </div>
        </div>
    </div>
<script type='text/javascript' src='/H5/js/zepto.min.js' charset='utf-8'></script>
<script type='text/javascript' src='/H5/js/sm.min.js' charset='utf-8'></script>
<script type='text/javascript' src='/H5/js/avalon.js' charset='utf-8'></script>
<script type='text/javascript' src='/H5/js/simpleStorage.js' charset='utf-8'></script>
<script type='text/javascript' src='/H5/js/mall.js?v=10' charset='utf-8'></script>
<script>
	var balance = avalon.define({
		$id: "balance",
		data: {total:{},income:{},expense:{}},
        list: [],
        page_num: 1,
        page_size: 10,
        loading: false,
        more: false,
        type: Mall.parseUrl( window.location.href ).type,
		getBalance: function( t ){
			Mall.request( "/api/MoneyCount" )
				.always( function( data ){
                    if( data.error_code == 0 ){
                        balance.data = data.data;
                    }
                    $( ".content" ).removeClass( "visibility" );
				} )
		},
        getList: function( o ){
            var postData = {
                page_num: balance.page_num,
                page_size: balance.page_size 
            }
            if( balance.loading ){
                return
            }
            balance.loading = true;
            Mall.request( "/api/MoneyList", postData )
                .always( function( data ){
                    if( data.error_code == 0 ){
                        if( o ){
                            balance.list = balance.list.concat( data.data.list );
                        }
                        else{
                            balance.list = data.data.list;
                        }
                        if( balance.page_num == data.data.page_total ){
                            balance.more = false;
                        }
                        else{
                            if( data.data.list.length == 0 ){
                                balance.more = false;
                            }
                            else{
                                if( balance.type != 1 ){
                                    balance.more = true;
                                }
                            }
                        }
                        balance.page_num ++;
                        $( ".content" ).removeClass( "visibility" );
                    }
                    balance.loading = false;
                } )
        },
        typeChoose: function( t ){
            $( ".content" ).addClass( "visibility" );
            var url = window.location.href.split( "?type=" )[0]+"?type="+t;
            balance.type = t;
            balance.page_num = 1;
            window.history.replaceState(null, null, url);
            if( t == 2 ){
                balance.infinite();
                balance.getList();
            }
            else{
                balance.more = false;
                balance.getBalance();
            }
        },
        infinite: function(){
            $(document).on('infinite', '.infinite-scroll-bottom',function() {
                if( balance.more ){
                    balance.getList( true );
                }
            });
            $.init();
        }
	})
	balance.type == 1 && balance.getBalance();
    balance.type == 2 && balance.getList();
    balance.type == 2 && balance.infinite();
	avalon.scan( document.body )
</script>
</body>
</html>